<template>
	<view>
		<view class="recharge">
			<view class="title">充值金额</view>
			<view class="money u-flex">
				<text>￥</text>
				<input type="digit" v-model="money" placeholder="请输入充值金额" placeholder-class="money-placeholder"/>
			</view>
		</view>
		
		<view class="tip">10元可得100i币</view>
		<view class="recharge-btn" @click="pay">付款</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:'',
				show:!1
			}
		},
		methods: {
			pay(){
				const money = this.money
				if(!money){this.$u.toast('充值金额不能为空');return;}
				this.$u.api.recharge({money}).then(res=>{
					// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							...res,
							success:()=> {
								uni.showModal({
									showCancel:false,
									content:'充值成功',
									success:()=> {
										this.$app.back()
									}
								})
							},
							fail:err=>{
								this.$u.toast(err)
							}
					})
					// #endif
				})
			},
			payed(){
				// 已支付
				
			}
		},
		onReady() {
			this.show = !0
		}
	}
</script>

<style lang="scss">
	page{background-color: #f5f5f5;}
	.tip{color: #F55332;padding-top: 10rpx;padding-left: 58rpx;}
	.recharge{margin: 40rpx 50rpx 0;background-color: #fff;padding: 20rpx 30rpx;border-radius: 24rpx;
		.title{font-weight: bold;font-size: 30rpx;padding: 10rpx 0;}
		.money{
			text{font-weight: bold;font-size: 50rpx;color: #000;}
			input{line-height: 110rpx;margin-left: 40rpx;font-size: 40rpx;height: 110rpx;flex: 1;font-weight: bold;}
		}
	}
	.money-placeholder{font-weight: normal!important;font-size: 32rpx;}
	.recharge-btn{margin: 90rpx 50rpx 0;background-color: $tc;color: #fff;font-size: 30rpx;text-align: center;border-radius: 100rpx;line-height: 80rpx;}
</style>
